
export const chartOption = () => {
    var charts = {
        unit: 'Kbps',
        names: ['出口', '入口'],
        lineX: ['2024-09-12 17:01', '2024-09-12 17:02', '2024-09-12 17:03', '2024-09-12 17:04', '2024-09-12 17:05', '2024-09-12 17:06', '2024-09-12 17:07', '2024-09-12 17:08', '2024-09-12 17:09', '2024-09-12 17:10', '2024-09-12 17:11', '2024-09-12 17:12', '2024-09-12 17:13', '2024-09-12 17:14', '2024-09-12 17:15', '2024-09-12 17:16', '2024-09-12 17:17', '2024-09-12 17:18', '2024-09-12 17:19', '2024-09-12 17:20'],
        value: [
            [451, 352, 303, 534, 95, 236, 217, 328, 159, 151, 231, 192, 453, 524, 165, 236, 527, 328, 129, 530],
            [360, 545, 80, 192, 330, 580, 192, 80, 250, 453, 352, 28, 625, 345, 65, 325, 468, 108, 253, 98]
        ]

    }
    var color = ['rgba(23, 255, 243', 'rgba(255,100,97']
    var lineY = [] as any[]

    for (var i = 0; i < charts.names.length; i++) {
        var x = i
        if (x > color.length - 1) {
            x = color.length - 1
        }
        var data = {
            name: charts.names[i],
            type: 'line',
            color: color[x] + ')',
            smooth: true,
            areaStyle: {
                normal: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: color[x] + ', 0.3)'// 0% 处的颜色
                        }, {
                            offset: 1, color: color[x] + ', 0)'// 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    },
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            symbol: 'circle',
            symbolSize: 5,
            data: charts.value[i]
        }
        lineY.push(data)
    }

    lineY[0].markLine = {
        silent: true,
        data: [{
            yAxis: 5
        }, {
            yAxis: 100
        }, {
            yAxis: 200
        }, {
            yAxis: 300
        }, {
            yAxis: 400
        }]
    }
    var option = {
        backgroundColor: '#1b2735',
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: charts.names,
            textStyle: {
                fontSize: 12,
                color: 'rgb(0,253,255,0.6)'
            },
            right: '4%'
        },
        grid: {
            top: '14%',
            left: '4%',
            right: '4%',
            bottom: '12%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: charts.lineX,
            axisLabel: {
                textStyle: {
                    color: 'rgb(0,253,255,0.6)'
                },
                formatter: function (params: any) {
                    return params.split(' ')[0] + '\n' + params.split(' ')[1]
                }
            }
        },
        yAxis: {
            name: charts.unit,
            type: 'value',
            axisLabel: {
                formatter: '{value}',
                textStyle: {
                    color: 'rgb(0,253,255,0.6)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgb(23,255,243,0.3)'
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'rgb(0,253,255,0.6)'
                }
            }
        },
        series: lineY
    }

    return option
}